<template>
  <div ref="pageView" class="page-view">
    <!-- -->
    <!-- 手机预览模块 -->
    <div class="preview">
      <div class="preview-head">
        <div class="preview-head-title">{{ pageData.name || '页面标题' }}</div>
      </div>
      <div class="preview-wrap">
        <iframe id="previewIframe" class="preview-iframe" :src="previewSrc" title="频道名称" width="100%" @load="onloadH5"
          :height="previewHeight"></iframe>
      </div>
      <div v-if="dragActive" class="preview-drag-mask" @dragover="onDragover"></div>
      <div v-if="dragActive" class="preview-drag-out" @dragover="onDragout"></div>
    </div>
  </div>
</template>

<script>
import { mapState,mapActions } from 'vuex';
import settings from '@/config'
export default {
  name: 'CmsManagePageView',

  data() {
    return {

    };
  },

  computed: {
    ...mapState(['pageData', 'previewHeight', 'componentsTopList', 'dragActive', 'addComponentIndex']),
    previewSrc() {
      return settings.decorateViewSrc + `?pageId=${this.$route.query.id || ''}&noLogin=true`
    }
  },

  methods: {
    ...mapActions(['pageChange']),
    onDragover(event) {
      //拖拽的默认事件不可以拖拽到别的窗口 所以需要清除默认事件
      event.preventDefault()
      //获取鼠标距离H5页面顶部的距离（即是和组件高度同一起点）=鼠标到浏览器页面的高度 + H5页面滚动距离 - 空白部分
      const dropTop = event.pageY + this.$refs.pageView.scrollTop - 191
      //当前要添加位置的索引
      let addIndex = 0
      //倒序遍历各个组件底部距离H5页面顶部的距离
      for (let i = this.componentsTopList.length - 1; i >= 0; i--) {
        //当前元素
        const value = this.componentsTopList[i]
        //下一个元素
        const prev = this.componentsTopList[i - 1] || 0
        //当前组件高度一半
        const _harf = (value - prev) / 2
        //如果插入的是第一个组件 且鼠标小于组件一半高度
        if (i === 0 && dropTop <= _harf) break

        //  如果鼠标高度大于组件中点高度 说明把组件插入当前组件下方
        if (dropTop > (value - _harf)) {
          addIndex = i + 1
          break
        }
      }
      //防止一直触发 通过addComponentIndex判断是否存在预添加功能
      if (addIndex === this.addComponentIndex) {
        return
      }
      //调用修改vuex里的addindex数据
      this.$store.commit('SET_DRAG_INDEX', addIndex)
      //跨源通信传递数据给crs
      this.$store.commit('VIEW_DRAG_PREVIEW', addIndex)
      console.log('over~~~~',this.addComponentIndex);
    },
    onDragout(event) {
      //阻止默认事件
      event.preventDefault()
      if (this.addComponentIndex !==null) {
          //拖拽出范围后取消预添加功能
      this.pageChange({
        type:'delete'
       })
       console.log('out启动！！！！',this.addComponentIndex);
      }
     
    },
    //iframe加载完成后
    onloadH5() {
      // console.log('iframe加载成功了')
      this.$store.commit('VIEW_UPDATE')
    }
  },
  mounted() {
    this.$store.dispatch('initMessage')
    //  console.log(this.previewHeight,'height1111',this.pageData);
  },
};
</script>

<style lang="less" scoped>
.page-view {
  position: absolute;
  top: 56px;
  left: 186px;
  right: 376px;
  bottom: 0;
  overflow-y: auto;
  overflow-x: hidden;
  background-color: #f7f8fa;
  display: flex;
  justify-content: center;
  user-select: none;
}

.cache-box {
  position: absolute;
  left: 20px;
  right: 20px;
  top: 20px;
  height: 30px;
  line-height: 30px;
  overflow: hidden;
  background: @color-1-bg;
  border: 1px solid @color-1;
  padding: 0 10px;
  z-index: 2;

  .color-1 {
    cursor: pointer;
  }

  .cache-close {
    position: absolute;
    right: 0;
    top: 0;
    width: 30px;
    height: 30px;
    text-align: center;
    cursor: pointer;
    color: #aaa;
  }
}

.preview {
  position: absolute;
  width: 100%;

  .preview-head {
    height: @content-header-height;
    width: 375px;
    margin: 72px auto 0;
    background: url("~@/assets/img/layout/header_bg.png") left top no-repeat;
    background-size: cover;
    position: relative;
    box-shadow: 0 0 14px 0 rgba(0, 0, 0, 0.1);

    .preview-head-title {
      width: 180px;
      margin: 0 auto;
      height: 64px;
      font-size: 14px;
      text-align: center;
      padding-top: 30px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }

  .preview-iframe {
    min-height: 600px;
  }

  .preview-drag-mask {
    position: absolute;
    left: 50%;
    top: 60px;
    bottom: 20px;
    width: 520px;
    margin-left: -260px;
    z-index: 10;
  }

  .preview-drag-out {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 9;
  }
}
</style>